import React from "react"
import Ionicon from "react-ionicons"
import PropTypes from "prop-types"
import { colors } from "../utility"

class CategorySelect extends React.Component {
  handleSelectCategory = (event, category) => {
    event.preventDefault()
    this.props.onSelectCategory(category)
    this.setState({
      selectedCategory: category
    })
  }

  render() {
    const { categories, selectedCategory  } = this.props
    const selectedCategoryId = selectedCategory && selectedCategory.id
    return (
      <div className="category-select-component">
        <div className="row">
          {categories.map((category, index) => {
            const iconColor =
              category.id === selectedCategoryId ? colors.white : colors.gray
            const backColor =
              category.id === selectedCategoryId
                ? colors.blue
                : colors.lightGray
            const activeClassName =
              selectedCategoryId === category.id
                ? "category-item col-3 active"
                : "category-item col-3"
            return (
              <div
                className={activeClassName}
                key={index}
                role="button"
                style={{ textAlign: "center" }}
                onClick={event => {
                  this.handleSelectCategory(event, category)
                }}
              >
                <Ionicon
                  className="rounded-circle cursor-pointer"
                  style={{ backgroundColor: backColor, padding: "5px" }}
                  fontSize="50px"
                  color={iconColor}
                  icon={category.iconName}
                />
                <p>{category.name}</p>
              </div>
            )
          })}
        </div>
      </div>
    )
  }
}

CategorySelect.propTypes = {
  categories: PropTypes.array.isRequired,
  selectedCategory: PropTypes.object,
  onSelectCategory: PropTypes.func.isRequired
}
export default CategorySelect
